<template>
    <div class="page_box">
        <h4>parent</h4>
        <!-- vue3 依赖注入 ***************************  -->
        <div @click="reactive_count++;studySomeThing.name='22'">{{ reactive_count }}</div>
        <child ref="childComponent">
            <h4>slot:default</h4>
            <template #slotItem>
                <span>slot:slotItem</span>
            </template>
        </child>

        <!-- vue3 hookjs使用 ***************************  -->
        <div @click="studySomeThing.name='22'">
            {{ studySomeThing.name }}
        </div>

    </div>
</template>
<script setup>
    import { provide, ref, inject, reactive, onMounted } from 'vue';
    import child from './child.vue';
    import { useStudySomeThing } from './hook';

// vue3 依赖注入 *************************** 
    // 传递字符串
    provide("set-string", "I am parents msg!");
    // 传递对象
    let obj = {name: 'Tim', age: 11};
    provide("set-object", obj);
    // 传递响应式数据
    let reactive_count = ref(1);
    provide("set-reactive", reactive_count);
    // 传递方法
    function initCount(){ 
        console.log("active-initCount");
        reactive_count.value = 1;
     }
    provide("set-fun", initCount);
    

// vue3 slot *************************** 
// 访问 $slots
const childComponent = ref(null);
onMounted(() => {
//   console.log(childComponent.value.$slots.slotItem);
});

// vue3 hookjs使用 *************************** 
let { studySomeThing } = useStudySomeThing();

</script>
<style >
</style>